
		<template>
			<div class="logview allbc">
				<div class="logview-top logreg-top alltop">
					<span>
						<router-link to="/">
							<</router-link>
					</span>
					<p>
						<span>
							<router-link to="/reg">注册</router-link>
							/
							<router-link to="/log">登录</router-link>
						</span>
					</p>
				</div>

				<van-form @submit="onSubmit" ref="regFrom">
					<van-field v-model="username" name="username" label="手机号" placeholder="请填写手机号"
						:rules="[{ required: true, message:'填写手机号'},{pattern:/^1[3-9]\d{9}$/,message:'手机号格式不正确'}]" />
					<van-field v-model="password" type="passeord" name="password" label="密码" placeholder="请填写密码"
						:rules="[{ required: true, message: '请填写密码'}]" />
					<van-field v-model="vercode" name="vercode" label="验证码" placeholder="请填写验证码" clearable
						:rules="[{ required: true, message: '请填写密码'},{pattern:/^\d{6}$/,message:'验证码格式错误'}]">
						<template #button>
							<van-button type="primary" native-type="button" size="small" @click="sendSms"
								:disabled="codeButDisabled">{{code_text}}</van-button>
						</template>
					</van-field>

					<div style="margin: 16px">
						<van-button round block type="info" native-type="submit" color="#07c160"
							style="width: 280px; height:40px;font-size: 14px; margin: 0 auto;">提交</van-button>

					</div>
				</van-form>
			</div>
		</template>

		<script>
			import {
				reg,
				sendSms
			} from'../api/user.js'

			export default {
				data() {
					return {
						username: '',
						password: '',
						vercode: '',
						codeButDisabled: false,
						code_text: "发送验证码"
					}
				},
				methods: {
					onSubmit(values) {
						console.log('submit', values);

						reg(values).then(res => {
							console.log(res)
							if (res.data.code == 0) {
								this.$toast('注册成功，请去登录', 1500);
								this.$router.push('/log')
								
							} else {
								this.$toast('注册失败');
							}
						})
					},
					async sendSms() {
						try {
							let validate_res = await this.$refs.regFrom.validate("username")
							this.codeButDisabled = true;
							this.code_text = "发送中";
							sendSms({
								mobile: this.username,
								type: 'register'
							}).then(res => {
								console.log(res);
								if (res.data.code == 0) {
									this.$toast(`短信已经发送到手机号${this.username},请注意查收`);
									let count = 60;
									let timer = setInterval(() => {
										count--
										this.code_text = `${count}s后再次获取`;
										if (count <= 0) {
											clearInterval(timer);

											this.code_text = "再次发送"
											this.codeButDisabled = false;
											count = 60
										}
									}, 1000)
									this.code_text = "再次发送";
								} else {
									this.$toast(eer.msg || '发送失败');
									this.codeButDisabled = false;
									this.code_text = "再次发送";
								}



							}).catch(err => {
								console.log(err);
								this.$toast(err.msg || '发送失败');
								this.codeButDisabled = false;
								this.code_text = "再次发送";
							})
						} catch (e) {

						}
					}
				}
			}
		</script>
<style lang="less">
	.regview-main{
		position: relative;
	}
	.msg_btn{
		color: #000;
		position: absolute;
		right: 10px;
		top: 115px;
	}
</style>

